import prism from "prismjs";
import "prismjs/components/prism-bash";
import "prismjs/components/prism-go";
import "prismjs/components/prism-php";
import "prismjs/components/prism-markup-templating";
import "prismjs/components/prism-sql";
import React from "react";
import { useState } from "react";
import { useEffect } from "react";
import { useRef } from "react";

export default function Prism({
    code,
    lang,
    children = null,
    className = "",
    onAnnotationChange = Function.prototype,
}: any) {
    const codeRef = useRef<HTMLDivElement>(null);
    const [annotations, setAnnotations] = useState<string[]>([]);
    const [lineNumber, setLineNumber] = useState(-1);

    const handleClick = (content: string, index: number) => {
        setLineNumber(index);
        onAnnotationChange(content);
    };

    // let maxLine = 0;
    // for (let i = 0; i < annotation.length; i++) {
    //     const element = annotation[i];
    //     if (element.line > maxLine) {
    //         maxLine = element.line;
    //     }
    // }

    useEffect(() => {
        if (codeRef.current) {
            const childNodes: any =
                codeRef.current.nextElementSibling?.childNodes;
            if (childNodes) {
                let index = 0;
                for (let i = 0; i < childNodes.length; i++) {
                    const childNode = childNodes[i];
                    if (childNode.nodeType !== 3) {
                        const line = parseInt(
                            childNode.getAttribute("data-line")
                        );
                        if (line > index) {
                            index = line;
                        }
                    }
                }
                let temp = new Array(index).fill("").map((_, index) => {
                    for (let i = 0; i < childNodes.length; i++) {
                        const childNode = childNodes[i];
                        if (
                            index ===
                            parseInt(childNode.getAttribute("data-line")) - 1
                        ) {
                            return childNode.innerHTML;
                        }
                    }
                    return "";
                });
                setAnnotations([...temp]);
            }
        }
    }, []);

    return (
        <div className={"relative mb-16" + className} ref={codeRef}>
            {children}
            <div className="absolute w-12 -left-12 p-4 text-2xl leading-normal cursor-pointer">
                {annotations.map((value, index) => {
                    return (
                        <div
                            style={{
                                color:
                                    lineNumber === index ? "#ffde00" : "#fff",
                            }}
                            key={index}
                            onClick={() => handleClick(value, index)}
                            dangerouslySetInnerHTML={{
                                __html: value
                                    ? '<span class="iconfont icon-eye-fill text-2xl"></span>'
                                    : `&nbsp;`,
                            }}
                        ></div>
                    );
                })}
            </div>
            <pre className="bg-white p-4 !text-2xl rounded overflow-auto">
                <code
                    className={"language-" + lang}
                    dangerouslySetInnerHTML={{
                        __html: prism.highlight(
                            code,
                            prism.languages[lang],
                            lang
                        ),
                    }}
                ></code>
            </pre>
        </div>
    );
}
